<template>
  <div style="padding: 0px; position: relative" class="foodsweek">
    <div
      ref="contextmenuFood"
      id="contextmenuFood"
      class="el-popover el-popper el-popover--plain"
      style="
        display: none;
        width: 200px;
        height: 300px;
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2064;
      "
      v-show="layershipu"
      tabindex="0"
      x-placement="bottom"
    >
      <div class="el-popover__title">{{ dragnode.name }}</div>

      <p>弹出菜单</p>
    </div>
    <!-- table-week start   -->
    <el-button
      icon="el-icon-arrow-left"
      circle
      style="
        position: absolute;
        left: 105px;
        top: 14px;
        z-index: 2;
        opacity: 0.8;
      "
      @click="toLeft"
    >
    </el-button>
    <el-button
      icon="el-icon-arrow-right"
      circle
      style="
        position: absolute;
        right: 10px;
        top: 14px;
        z-index: 2;
        opacity: 0.8;
      "
      @click="toRight"
    >
    </el-button>
    <!-- <img src="/img/cater/left.png" style="width: 3rem;height: 3rem;position: absolute;left:100px;z-index: 9999;"/>
    <img src="/img/cater/right.png" style="width: 3rem;height: 3rem;position: absolute;right:10px;z-index: 9999;" /> -->
    <el-table
      :max-height="foodWeekHeight"
      :empty-text="empty"
      class="table-week"
      style="width: 100%"
      :data="datas"
      border
      fit
      :header-cell-style="headerCellStyle"
      ref="foodWeekTable"
    >
      <el-table-column
        align="center"
        width="100"
        fixed
        class-name="col-date3 colNoneBorder"
      >
        <template slot="header"> 菜品/食物 </template>
        <template slot-scope="scope">
          <div v-bind:data="scope.row.name" class="meals-foodType">
            <i class="ico1" :style="cellStyle(scope.row.name)"></i>
            <span>{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 周一   -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week1')"
        align="center"
        width="400"
      >
        <template slot="header">
          <div class="">
            <span>
              {{ headers.find((p) => p.name == "week1").lable }}({{
                headers.find((p) => p.name == "week1").date
              }})
            </span>
          </div>
          <div class="">
            <div class="weekHeader">菜品/食材</div>
            <div class="weekHeader">用量(g)</div>
            <div class="weekHeader">图片</div>
          </div>
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week1')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :empty-text="empty"
              @expand-change="expandchange"
              :data="scope.row.weeks.find((p) => p.name == 'week1').foods"
              row-key="id"
              :show-header="false"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="菜品/食材"
                prop="name"
                header-align="center"
                align="left"
              >
                <template slot-scope="scope">
                  <!--//食材-->
                  <span
                    v-if="!scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="!scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                      >{{ scope.row.name }}</span
                    >
                  </span>
                  <!--//菜品-->
                  <span
                    v-if="scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                    >
                      {{ scope.row.name }}
                    </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <!--//食材-->
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      placeholder="请输入内容"
                      @change="
                        foodChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week1').id
                        )
                      "
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      placeholder="请输入内容"
                      @change="
                        dishChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week1').id
                        )
                      "
                    ></el-input>
                    <div style="width: 35px; text-algin: center">
                      <el-link
                        v-if="scope1.row.children"
                        type="primary"
                        @click="
                          onRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week1').id,
                            scope1.row.id,
                            'week1'
                          )
                        "
                        >移除</el-link
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="图片" align="center">
                <template slot-scope="scope1">
                  <div
                    v-show="
                      scope1.$index === 0 &&
                      scope.row.weeks.find((p) => p.name == 'week1')
                    "
                    style="width: 100px; height: 102px; margin: 0 auto"
                  >
                    <el-upload
                      action="/api/blade-resource/oss/endpoint/put-file"
                      :on-success="
                        (res, file) => {
                          handleAvatarSuccess(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week1').id,
                            res,
                            file
                          );
                        }
                      "
                      class="avue-upload-item"
                      :headers="token"
                      :auto-upload="true"
                      accept=".jpeg,.jpg,.gif,.png"
                      :file-list="
                        scope.row.weeks.find((p) => p.name == 'week1').image ==
                          '' ||
                        scope.row.weeks.find((p) => p.name == 'week1').image ==
                          undefined
                          ? []
                          : [
                              {
                                url: scope.row.weeks.find(
                                  (p) => p.name == 'week1'
                                ).image,
                              },
                            ]
                      "
                      :limit="1"
                      :on-preview="
                        (file) => {
                          handlePictureCardPreview(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week1').id,
                            file
                          );
                        }
                      "
                      :on-remove="
                        (file) => {
                          handleAvatarRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week1').id,
                            file
                          );
                        }
                      "
                      list-type="picture-card"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                      append-to-body
                      :visible.sync="
                        scope.row.weeks.find((p) => p.name == 'week1')
                          .dialogVisible
                      "
                    >
                      <img
                        width="500px"
                        height="500px"
                        :src="
                          scope.row.weeks.find((p) => p.name == 'week1').image
                        "
                        alt=""
                      />
                    </el-dialog>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week1').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周二   -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week2')"
        align="center"
        width="400"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week2").lable }}({{
              headers.find((p) => p.name == "week2").date
            }})
          </div>
          <div class="">
            <div class="weekHeader">菜品/食材</div>
            <div class="weekHeader">用量(g)</div>
            <div class="weekHeader">图片</div>
          </div>
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week2')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week2').foods"
              row-key="id"
              :show-header="false"
              :empty-text="empty"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="菜品/食材"
                prop="name"
                header-align="center"
                align="left"
              >
                <template slot-scope="scope">
                  <!--//食材-->
                  <span
                    v-if="!scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="!scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                      >{{ scope.row.name }}</span
                    >
                  </span>
                  <!--//菜品-->
                  <span
                    v-if="scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                    >
                      {{ scope.row.name }}
                    </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        foodChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week2').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        dishChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week2').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <div style="width: 35px; text-algin: center">
                      <el-link
                        v-if="scope1.row.children"
                        type="primary"
                        @click="
                          onRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week2').id,
                            scope1.row.id,
                            'week2'
                          )
                        "
                        >移除</el-link
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="图片" align="center">
                <template slot-scope="scope1">
                  <div
                    v-show="
                      scope1.$index === 0 &&
                      scope.row.weeks.find((p) => p.name == 'week2')
                    "
                    style="width: 100px; height: 102px; margin: 0 auto"
                  >
                    <el-upload
                      action="/api/blade-resource/oss/endpoint/put-file"
                      :on-success="
                        (res, file) => {
                          handleAvatarSuccess(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week2').id,
                            res,
                            file
                          );
                        }
                      "
                      class="avue-upload-item"
                      :headers="token"
                      :auto-upload="true"
                      accept=".jpeg,.jpg,.gif,.png"
                      :file-list="
                        scope.row.weeks.find((p) => p.name == 'week2').image ==
                          '' ||
                        scope.row.weeks.find((p) => p.name == 'week2').image ==
                          undefined
                          ? []
                          : [
                              {
                                url: scope.row.weeks.find(
                                  (p) => p.name == 'week2'
                                ).image,
                              },
                            ]
                      "
                      :limit="1"
                      :on-preview="
                        (file) => {
                          handlePictureCardPreview(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week2').id,
                            file
                          );
                        }
                      "
                      :on-remove="
                        (file) => {
                          handleAvatarRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week2').id,
                            file
                          );
                        }
                      "
                      list-type="picture-card"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                      append-to-body
                      :visible.sync="
                        scope.row.weeks.find((p) => p.name == 'week2')
                          .dialogVisible
                      "
                    >
                      <img
                        width="500px"
                        height="500px"
                        :src="
                          scope.row.weeks.find((p) => p.name == 'week2').image
                        "
                        alt=""
                      />
                    </el-dialog>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week2').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周三   -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week3')"
        align="center"
        width="400"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week3").lable }}({{
              headers.find((p) => p.name == "week3").date
            }})
          </div>
          <div class="">
            <div class="weekHeader">菜品/食材</div>
            <div class="weekHeader">用量(g)</div>
            <div class="weekHeader">图片</div>
          </div>
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week3')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week3').foods"
              row-key="id"
              :show-header="false"
              :empty-text="empty"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="菜品/食材"
                prop="name"
                header-align="center"
                align="left"
              >
                <template slot-scope="scope">
                  <!--//食材-->
                  <span
                    v-if="!scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="!scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                      >{{ scope.row.name }}</span
                    >
                  </span>
                  <!--//菜品-->
                  <span
                    v-if="scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                    >
                      {{ scope.row.name }}
                    </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        foodChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week3').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        dishChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week3').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <div style="width: 35px; text-algin: center">
                      <el-link
                        v-if="scope1.row.children"
                        type="primary"
                        @click="
                          onRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week3').id,
                            scope1.row.id,
                            'week3'
                          )
                        "
                        >移除</el-link
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="图片" align="center">
                <template slot-scope="scope1">
                  <div
                    v-show="
                      scope1.$index === 0 &&
                      scope.row.weeks.find((p) => p.name == 'week3')
                    "
                    style="width: 100px; height: 102px; margin: 0 auto"
                  >
                    <el-upload
                      action="/api/blade-resource/oss/endpoint/put-file"
                      :on-success="
                        (res, file) => {
                          handleAvatarSuccess(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week3').id,
                            res,
                            file
                          );
                        }
                      "
                      class="avue-upload-item"
                      :headers="token"
                      :auto-upload="true"
                      accept=".jpeg,.jpg,.gif,.png"
                      :file-list="
                        scope.row.weeks.find((p) => p.name == 'week3').image ==
                          '' ||
                        scope.row.weeks.find((p) => p.name == 'week3').image ==
                          undefined
                          ? []
                          : [
                              {
                                url: scope.row.weeks.find(
                                  (p) => p.name == 'week3'
                                ).image,
                              },
                            ]
                      "
                      :limit="1"
                      :on-preview="
                        (file) => {
                          handlePictureCardPreview(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week3').id,
                            file
                          );
                        }
                      "
                      :on-remove="
                        (file) => {
                          handleAvatarRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week3').id,
                            file
                          );
                        }
                      "
                      list-type="picture-card"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                      append-to-body
                      :visible.sync="
                        scope.row.weeks.find((p) => p.name == 'week3')
                          .dialogVisible
                      "
                    >
                      <img
                        width="500px"
                        height="500px"
                        :src="
                          scope.row.weeks.find((p) => p.name == 'week3').image
                        "
                        alt=""
                      />
                    </el-dialog>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week4').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周四   -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week4')"
        align="center"
        width="400"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week4").lable }}({{
              headers.find((p) => p.name == "week4").date
            }})
          </div>
          <div class="">
            <div class="weekHeader">菜品/食材</div>
            <div class="weekHeader">用量(g)</div>
            <div class="weekHeader">图片</div>
          </div>
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week4')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week4').foods"
              row-key="id"
              :show-header="false"
              :empty-text="empty"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="菜品/食材"
                prop="name"
                header-align="center"
                align="left"
              >
                <template slot-scope="scope">
                  <!--//食材-->
                  <span
                    v-if="!scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="!scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                      >{{ scope.row.name }}</span
                    >
                  </span>
                  <!--//菜品-->
                  <span
                    v-if="scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                    >
                      {{ scope.row.name }}
                    </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        foodChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week4').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        dishChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week4').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <div style="width: 35px; text-algin: center">
                      <el-link
                        v-if="scope1.row.children"
                        type="primary"
                        @click="
                          onRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week4').id,
                            scope1.row.id,
                            'week4'
                          )
                        "
                        >移除</el-link
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="图片" align="center">
                <template slot-scope="scope1">
                  <div
                    v-show="
                      scope1.$index === 0 &&
                      scope.row.weeks.find((p) => p.name == 'week4')
                    "
                    style="width: 100px; height: 102px; margin: 0 auto"
                  >
                    <el-upload
                      action="/api/blade-resource/oss/endpoint/put-file"
                      :on-success="
                        (res, file) => {
                          handleAvatarSuccess(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week4').id,
                            res,
                            file
                          );
                        }
                      "
                      class="avue-upload-item"
                      :headers="token"
                      :auto-upload="true"
                      accept=".jpeg,.jpg,.gif,.png"
                      :file-list="
                        scope.row.weeks.find((p) => p.name == 'week4').image ==
                          '' ||
                        scope.row.weeks.find((p) => p.name == 'week4').image ==
                          undefined
                          ? []
                          : [
                              {
                                url: scope.row.weeks.find(
                                  (p) => p.name == 'week4'
                                ).image,
                              },
                            ]
                      "
                      :limit="1"
                      :on-preview="
                        (file) => {
                          handlePictureCardPreview(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week4').id,
                            file
                          );
                        }
                      "
                      :on-remove="
                        (file) => {
                          handleAvatarRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week4').id,
                            file
                          );
                        }
                      "
                      list-type="picture-card"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                      append-to-body
                      :visible.sync="
                        scope.row.weeks.find((p) => p.name == 'week4')
                          .dialogVisible
                      "
                    >
                      <img
                        width="500px"
                        height="500px"
                        :src="
                          scope.row.weeks.find((p) => p.name == 'week4').image
                        "
                        alt=""
                      />
                    </el-dialog>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week4').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周五  -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week5')"
        align="center"
        width="400"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week5").lable }}({{
              headers.find((p) => p.name == "week5").date
            }})
          </div>
          <div class="">
            <div class="weekHeader">菜品/食材</div>
            <div class="weekHeader">用量(g)</div>
            <div class="weekHeader">图片</div>
          </div>
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week5')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week5').foods"
              row-key="id"
              :show-header="false"
              :empty-text="empty"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="菜品/食材"
                prop="name"
                header-align="center"
                align="left"
              >
                <template slot-scope="scope">
                  <!--//食材-->
                  <span
                    v-if="!scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="!scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                      >{{ scope.row.name }}</span
                    >
                  </span>
                  <!--//菜品-->
                  <span
                    v-if="scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                    >
                      {{ scope.row.name }}
                    </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        foodChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week5').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        dishChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week5').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <div style="width: 35px; text-algin: center">
                      <el-link
                        v-if="scope1.row.children"
                        type="primary"
                        @click="
                          onRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week5').id,
                            scope1.row.id,
                            'week5'
                          )
                        "
                        >移除</el-link
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="图片" align="center">
                <template slot-scope="scope1">
                  <div
                    v-show="
                      scope1.$index === 0 &&
                      scope.row.weeks.find((p) => p.name == 'week5')
                    "
                    style="width: 100px; height: 102px; margin: 0 auto"
                  >
                    <el-upload
                      action="/api/blade-resource/oss/endpoint/put-file"
                      :on-success="
                        (res, file) => {
                          handleAvatarSuccess(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week5').id,
                            res,
                            file
                          );
                        }
                      "
                      class="avue-upload-item"
                      :headers="token"
                      :auto-upload="true"
                      accept=".jpeg,.jpg,.gif,.png"
                      :file-list="
                        scope.row.weeks.find((p) => p.name == 'week5').image ==
                          '' ||
                        scope.row.weeks.find((p) => p.name == 'week5').image ==
                          undefined
                          ? []
                          : [
                              {
                                url: scope.row.weeks.find(
                                  (p) => p.name == 'week5'
                                ).image,
                              },
                            ]
                      "
                      :limit="1"
                      :on-preview="
                        (file) => {
                          handlePictureCardPreview(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week5').id,
                            file
                          );
                        }
                      "
                      :on-remove="
                        (file) => {
                          handleAvatarRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week5').id,
                            file
                          );
                        }
                      "
                      list-type="picture-card"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                      append-to-body
                      :visible.sync="
                        scope.row.weeks.find((p) => p.name == 'week5')
                          .dialogVisible
                      "
                    >
                      <img
                        width="500px"
                        height="500px"
                        :src="
                          scope.row.weeks.find((p) => p.name == 'week5').image
                        "
                        alt=""
                      />
                    </el-dialog>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week5').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周六   -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week6')"
        align="center"
        width="400"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week6").lable }}({{
              headers.find((p) => p.name == "week6").date
            }})
          </div>
          <div class="">
            <div class="weekHeader">菜品/食材</div>
            <div class="weekHeader">用量(g)</div>
            <div class="weekHeader">图片</div>
          </div>
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week6')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week6').foods"
              row-key="id"
              :show-header="false"
              :empty-text="empty"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="菜品/食材"
                prop="name"
                header-align="center"
                align="left"
              >
                <template slot-scope="scope">
                  <!--//食材-->
                  <span
                    v-if="!scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="!scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                      >{{ scope.row.name }}</span
                    >
                  </span>
                  <!--//菜品-->
                  <span
                    v-if="scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                    >
                      {{ scope.row.name }}
                    </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        foodChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week6').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        dishChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week6').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <div style="width: 35px; text-algin: center">
                      <el-link
                        v-if="scope1.row.children"
                        type="primary"
                        @click="
                          onRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week6').id,
                            scope1.row.id,
                            'week6'
                          )
                        "
                        >移除</el-link
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="图片" align="center">
                <template slot-scope="scope1">
                  <div
                    v-show="
                      scope1.$index === 0 &&
                      scope.row.weeks.find((p) => p.name == 'week6')
                    "
                    style="width: 100px; height: 102px; margin: 0 auto"
                  >
                    <el-upload
                      action="/api/blade-resource/oss/endpoint/put-file"
                      :on-success="
                        (res, file) => {
                          handleAvatarSuccess(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week6').id,
                            res,
                            file
                          );
                        }
                      "
                      class="avue-upload-item"
                      :headers="token"
                      :auto-upload="true"
                      accept=".jpeg,.jpg,.gif,.png"
                      :file-list="
                        scope.row.weeks.find((p) => p.name == 'week6').image ==
                          '' ||
                        scope.row.weeks.find((p) => p.name == 'week6').image ==
                          undefined
                          ? []
                          : [
                              {
                                url: scope.row.weeks.find(
                                  (p) => p.name == 'week6'
                                ).image,
                              },
                            ]
                      "
                      :limit="1"
                      :on-preview="
                        (file) => {
                          handlePictureCardPreview(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week6').id,
                            file
                          );
                        }
                      "
                      :on-remove="
                        (file) => {
                          handleAvatarRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week6').id,
                            file
                          );
                        }
                      "
                      list-type="picture-card"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                      append-to-body
                      :visible.sync="
                        scope.row.weeks.find((p) => p.name == 'week6')
                          .dialogVisible
                      "
                    >
                      <img
                        width="500px"
                        height="500px"
                        :src="
                          scope.row.weeks.find((p) => p.name == 'week6').image
                        "
                        alt=""
                      />
                    </el-dialog>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week6').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <!-- 周天  -->
      <el-table-column
        v-if="headers.find((p) => p.name == 'week7')"
        align="center"
        width="400"
      >
        <template slot="header">
          <div class="">
            {{ headers.find((p) => p.name == "week7").lable }}({{
              headers.find((p) => p.name == "week7").date
            }})
          </div>
          <div class="">
            <div class="weekHeader">菜品/食材</div>
            <div class="weekHeader">用量(g)</div>
            <div class="weekHeader">图片</div>
          </div>
        </template>
        <template slot-scope="scope">
          <div
            class="drapIn"
            @drop="drop($event, scope.row.id, 'week7')"
            @dragleave="ondragleave($event)"
            @dragenter="ondragenter($event)"
            @dragover="ondragover($event)"
          >
            <!-- table start -->
            <el-table
              class="table-foods"
              style="width: 100%"
              :data="scope.row.weeks.find((p) => p.name == 'week7').foods"
              row-key="id"
              :show-header="false"
              :empty-text="empty"
              @expand-change="expandchange"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :span-method="onTableSpanMethod"
            >
              <el-table-column
                label="菜品/食材"
                prop="name"
                header-align="center"
                align="left"
              >
                <template slot-scope="scope">
                  <!--//食材-->
                  <span
                    v-if="!scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="!scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                      >{{ scope.row.name }}</span
                    >
                  </span>
                  <!--//菜品-->
                  <span
                    v-if="scope.row.children"
                    :class="{ jundgeFoodRedColor: scope.row.redColor }"
                  >
                    <span
                      v-if="scope.row.children"
                      :class="{ jundgeFoodOrangeColor: scope.row.orangeColor }"
                    >
                      {{ scope.row.name }}
                    </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="用量(g)" prop="count" align="center">
                <template slot-scope="scope1">
                  <div style="display: flex">
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="!scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        foodChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week7').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <el-input
                      style="flex: 1"
                      v-model="scope1.row.count"
                      v-if="scope1.row.children"
                      type="text"
                      size="mini"
                      @change="
                        dishChange(
                          scope.row.id,
                          scope.row.weeks.find((p) => p.name == 'week7').id
                        )
                      "
                      placeholder="请输入内容"
                    ></el-input>
                    <div style="width: 35px; text-algin: center">
                      <el-link
                        v-if="scope1.row.children"
                        type="primary"
                        @click="
                          onRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week7').id,
                            scope1.row.id,
                            'week7'
                          )
                        "
                        >移除</el-link
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="图片" align="center">
                <template slot-scope="scope1">
                  <div
                    v-show="
                      scope1.$index === 0 &&
                      scope.row.weeks.find((p) => p.name == 'week7')
                    "
                    style="width: 100px; height: 102px; margin: 0 auto"
                  >
                    <el-upload
                      action="/api/blade-resource/oss/endpoint/put-file"
                      :on-success="
                        (res, file) => {
                          handleAvatarSuccess(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week7').id,
                            res,
                            file
                          );
                        }
                      "
                      class="avue-upload-item"
                      :headers="token"
                      :auto-upload="true"
                      accept=".jpeg,.jpg,.gif,.png"
                      :file-list="
                        scope.row.weeks.find((p) => p.name == 'week7').image ==
                          '' ||
                        scope.row.weeks.find((p) => p.name == 'week7').image ==
                          undefined
                          ? []
                          : [
                              {
                                url: scope.row.weeks.find(
                                  (p) => p.name == 'week7'
                                ).image,
                              },
                            ]
                      "
                      :limit="1"
                      :on-preview="
                        (file) => {
                          handlePictureCardPreview(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week7').id,
                            file
                          );
                        }
                      "
                      :on-remove="
                        (file) => {
                          handleAvatarRemove(
                            scope.row.id,
                            scope.row.weeks.find((p) => p.name == 'week7').id,
                            file
                          );
                        }
                      "
                      list-type="picture-card"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                      append-to-body
                      :visible.sync="
                        scope.row.weeks.find((p) => p.name == 'week7')
                          .dialogVisible
                      "
                    >
                      <img
                        width="500px"
                        height="500px"
                        :src="
                          scope.row.weeks.find((p) => p.name == 'week7').image
                        "
                        alt=""
                      />
                    </el-dialog>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- table end -->
            <!--<div style="padding: 6px; background: #fff">-->
            <!--<el-button-->
            <!--type="primary"-->
            <!--size="mini"-->
            <!--plain-->
            <!--@click="-->
            <!--onChoice(-->
            <!--scope.row.id,-->
            <!--scope.row.weeks.find((p) => p.name == 'week7').id-->
            <!--)-->
            <!--"-->
            <!--&gt;选择食谱/菜品</el-button-->
            <!--&gt;-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- table-week end   -->
    <!-- foods choice start-->
    <el-dialog
      :title="'选择食谱 / 菜品'"
      append-to-body
      :visible.sync="dialog_choice.opened"
      width="600px"
    >
      <foods-choice v-if="dialog_choice.opened" @change="onChoiceChange" />
    </el-dialog>
    <!-- foods choice end -->
  </div>
</template>
<script>
import foodsChoice from "@/views/foods/components/foodschoice";
import { calRecipe } from "@/api/system/meals";
export default {
  name: "foodsWeek",
  components: {
    foodsChoice,
  },
  props: {
    topShow: {
      type: Boolean,
    },
    // 表格头部
    headers: [],
    // 表格数据
    datas: [],
    // 5天制 6天制 7天制
    days: {
      type: Number,
      default: 5,
    },
    height: {
      type: Number,
      default: 800,
    },
    crowd: "",
    foodCatalog: "",
    startAge: undefined,
    endAge: undefined,
    score: "",
    dragnode: {},
    foodMutuals: [],
  },
  data() {
    return {
      empty: " ",
      intakeValue: [
        {
          name: "谷类",
          code: "gl",
        },
        {
          name: "薯类",
          code: "sl",
        },
        {
          name: "蔬菜",
          code: "sc",
        },
        {
          name: "水果",
          code: "sg",
        },
        {
          name: "畜禽肉类-蛋类-水产品",
          code: "xql:scp:dl",
        },
        {
          name: "大豆",
          code: "dd",
        },
        {
          name: "坚果",
          code: "jg",
        },
        ,
        {
          name: "乳制品",
          code: "rzp",
        },
        ,
        {
          name: "食用油",
          code: "syy",
        },
        ,
        {
          name: "盐",
          code: "sy",
        },
      ],
      nutritionValue: [
        {
          name: "能量",
          code: "101",
          value: "0",
          bz: "80%-120%",
          min: 80,
          max: 120,
        },
        {
          name: "蛋白质",
          code: "102",
          value: "0",
          bz: "80%-150%",
          min: 80,
          max: 150,
        },
        {
          name: "钙",
          code: "201",
          value: "0",
          bz: "80%-160%",
          min: 80,
          max: 160,
        },
        {
          name: "纳",
          code: "204",
          value: "0",
          bz: "80%-135%",
          min: 80,
          max: 135,
        },
        {
          name: "铁",
          code: "301",
          value: "0",
          bz: "80%-160%",
          min: 80,
          max: 160,
        },
        {
          name: "锌",
          code: "303",
          value: "0",
          bz: "80%-160%",
          min: 80,
          max: 160,
        },
        {
          name: "维生素A",
          code: "401",
          value: "0",
          bz: "80%-180%",
          min: 80,
          max: 180,
        },
        {
          name: "维生素B1",
          code: "405",
          value: "0",
          bz: "80%-250%",
          min: 80,
          max: 250,
        },
        {
          name: "维生素B2",
          code: "406",
          value: "0",
          bz: "80%-250%",
          min: 80,
          max: 250,
        },
        {
          name: "维生素C",
          code: "415",
          value: "0",
          bz: "80%-250%",
          min: 80,
          max: 250,
        },
      ],
      token: {
        "Blade-Auth": "",
      },
      powerValue: [
        { name: "脂肪占总能量", code: "103" },
        { name: "蛋白占总能量", code: "102" },
        { name: "碳水化合物占总能量", code: "104" },
      ],
      empty_image: "/img/tianjia.png",
      dialog_choice: {
        opened: false, // 是否显示
        data_id: "", // 主数据ID
        week_id: "", // 周几数据ID
        upload_url: "/api/blade-resource/oss/endpoint/put-file", // 上传地址
      },
      mealTypeData: [
        {
          name: "早餐",
          value: "1",
        },
        {
          name: "早点",
          value: "2",
        },
        {
          name: "午餐",
          value: "3",
        },
        {
          name: "午点",
          value: "4",
        },
        {
          name: "晚餐",
          value: "5",
        },
        {
          name: "晚点",
          value: "6",
        },
      ],
      flag: true,
      pcScore: "0",
      foodWeekHeight: 430,
    };
  },
  // 计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
  computed: {},
  // 当属性的值发生变化时，就会调用对应属性的方法，方法里面的形参对应的是属性的新值和旧值
  watch: {
    topShow: function () {
      this.getfoodWeekHeight();
    },
  },
  // 组件第一次加载
  mounted() {
    this.init();
    this.getToken(); //获取token
    this.getfoodWeekHeight();
  },

  methods: {
    getfoodWeekHeight() {
      var h = 215;
      if (this.topShow) {
        h = 324;
      }
      this.foodWeekHeight = document.body.offsetHeight - h;
    },
    toRight() {
      var colNum = this.$refs.foodWeekTable.columns.length - 1;
      var nowLeftWidth = this.$refs.foodWeekTable.bodyWrapper.scrollLeft;
      var LeftWidth = 0;
      for (let i = 0; i < colNum; i++) {
        if (nowLeftWidth < 400 * (i + 1)) {
          LeftWidth = 400 * (i + 1);
          break;
        }
      }
      console.log(LeftWidth);
      this.$refs.foodWeekTable.bodyWrapper.scrollLeft = LeftWidth;
    },
    toLeft() {
      var colNum = this.$refs.foodWeekTable.columns.length - 2;
      var nowLeftWidth = this.$refs.foodWeekTable.bodyWrapper.scrollLeft;
      var LeftWidth = 0;
      for (let i = colNum; i > 0; i--) {
        if (nowLeftWidth > 400 * (i - 1)) {
          LeftWidth = 400 * (i - 1);
          break;
        }
      }
      console.log(LeftWidth);
      console.log(colNum);
      this.$refs.foodWeekTable.bodyWrapper.scrollLeft = LeftWidth;
    },
    headerCellStyle({ row, colunm, rowIndex, columnIndex }) {
      var backgroundImage = [
        { background: "#FFFFFF !important" },
        {
          background:
            'url("/img/cater/mon.png") 20% 50% no-repeat, linear-gradient(90deg, #FFFAEC 0%,#FDD36D 100%)!important',
          color: "#DA9501!important",
        },
        {
          background:
            'url("/img/cater/tue.png") 20% 50% no-repeat, linear-gradient(90deg, #FFFAEC 0%,#FDD36D 100%)!important',
          color: "#DA9501!important",
        },
        {
          background:
            'url("/img/cater/wed.png") 20% 50% no-repeat, linear-gradient(90deg, #FFFAEC 0%,#FDD36D 100%)!important',
          color: "#DA9501!important",
        },
        {
          background:
            'url("/img/cater/thu.png") 20% 50% no-repeat, linear-gradient(90deg, #FFFAEC 0%,#FDD36D 100%)!important',
          color: "#DA9501!important",
        },
        {
          background:
            'url("/img/cater/fri.png") 20% 50% no-repeat, linear-gradient(90deg, #FFFAEC 0%,#FDD36D 100%)!important',
          color: "#DA9501!important",
        },
        {
          background:
            'url("/img/cater/sat.png") 20% 50% no-repeat, linear-gradient(90deg, #FFFAEC 0%,#FDD36D 100%)!important',
          color: "#DA9501!important",
        },
        {
          background:
            'url("/img/cater/sun.png") 20% 50% no-repeat, linear-gradient(90deg, #FFFAEC 0%,#FDD36D 100%)!important',
          color: "#DA9501!important",
        },
      ];

      return backgroundImage[columnIndex];
    },
    cellStyle(name) {
      var backgroundImage = {};
      switch (name) {
        case "早餐":
          backgroundImage = {
            background:
              'url("/img/cater/food1.png") no-repeat center!important',
            display: "block",
            height: "24px",
          };
          break;
        case "早点":
          backgroundImage = {
            background:
              'url("/img/cater/food2.png") no-repeat center!important',
            display: "block",
            height: "24px",
          };
          break;
        case "午餐":
          backgroundImage = {
            background:
              'url("/img/cater/food3.png") no-repeat center!important',
            display: "block",
            height: "24px",
          };
          break;
        case "午点":
          backgroundImage = {
            background:
              'url("/img/cater/food2.png") no-repeat center!important',
            display: "block",
            height: "24px",
          };
          break;
        case "晚餐":
          backgroundImage = {
            background:
              'url("/img/cater/food6.png") no-repeat center!important',
            display: "block",
            height: "24px",
          };
          break;
        case "晚点":
          backgroundImage = {
            background:
              'url("/img/cater/food2.png") no-repeat center!important',
            display: "block",
            height: "24px",
          };
          break;
        default:
          break;
      }
      return backgroundImage;
    },
    getToken() {
      let str = JSON.parse(localStorage.getItem("saber-token"));
      this.token["Blade-Auth"] = `bearer ${str.content}`;
    },
    //同步修改高度
    resizeExpendHeight() {
      setTimeout(() => {
        //真实高度列表
        var foodTypeList = document.querySelectorAll(
          ".colNoneBorder.is-hidden .meals-foodType"
        );
        for (var i = 0; i < foodTypeList.length; i++) {
          var pnode = foodTypeList[i].parentNode.parentNode.parentNode;
          if (pnode.className.indexOf("is-leaf") < 0) {
            var nodeSelect =
              '.colNoneBorder [data="' +
              foodTypeList[i].getAttribute("data") +
              '"]';
            var shownodelist = document.querySelectorAll(nodeSelect);
            for (var j = 0; j < shownodelist.length; j++) {
              var tpnode = shownodelist[j].parentNode.parentNode;
              if (tpnode.className.indexOf("is-hidden") < 0) {
                tpnode.style.height = pnode.offsetHeight + "px";
              }
            }
          }
        }
      }, 20);
    },
    oncontextmenuFood(e, data_id, week_id, food_id) {
      if (e.button === 2) {
        //如果button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）
        this.$refs.contextmenuFood.style.top = e.clientY - 140 + "px"; //鼠标点击时给div定位Y轴
        this.$refs.contextmenuFood.style.left = e.clientX + "px"; //鼠标点击时给div定位X轴
        this.$refs.contextmenuFood.style.display = "block"; //显示div盒子
      } else {
        this.$refs.contextmenuFood.style.display = "none"; //否则不显示div盒子
      }
    },
    GetCurentNode(data_id, week_id, food_id) {
      this.datas.forEach((data) => {
        if (data.id === data_id) {
          data.weeks.forEach((week) => {
            if (week.id === week_id) {
              var idx = week.foods.find((p) => p.id === food_id);
              if (idx > -1) {
                week.foods.splice(idx, 1);
                return;
              }
            }
          });
        }
      });
    },

    expandchange(a, b) {
      this.resizeExpendHeight();
    },
    // 根据名称获取mealtype
    getmealTypeData(name) {
      return this.mealTypeData.filter((_) => {
        if (_.name == name) {
          return _.value;
        }
      })[0].value;
    },
    //拖放进入
    ondragenter(ev) {
      ev.preventDefault();
      ev.path.forEach((e) => {
        var cname = e.className;
        if (cname == "drapIn") {
          e.classList.add("drapInActive");
        }
      });
    },
    ondragleave(ev) {
      ev.preventDefault();
      var drapIn = null;

      ev.path.forEach((e) => {
        var cname = e.className;
        if (cname && cname.indexOf("drapIn") >= 0) {
          drapIn = e;
        }
      });

      if (drapIn != null) {
        if (!drapIn.contains(ev.fromElement)) {
          drapIn.classList.remove("drapInActive");
        }
      }
    },
    ondragover(ev) {
      ev.preventDefault();
    },

    //拖放结束
    drop(ev, id, week) {
      ev.preventDefault();
      //
      var node = JSON.parse(JSON.stringify(this.dragnode.node));
      this.appendDragFood(node, id, week);
      this.$emit("jundgeFood");
      ev.path.forEach((e) => {
        var cname = e.className;
        if (cname && cname.indexOf("drapIn") >= 0) {
          e.classList.remove("drapInActive");
        }
      });
      this.getFoodScore();
    },
    //获取分数
    getFoodScore() {
      this.dragnode.node = {};
      let day = [0, 0, 0, 0, 0, 0, 0];
      let days = 0;
      let foods = {};
      let mealTypes = [];
      debugger;
      if (this.startAge) {
        foods["startAge"] = this.startAge;
        foods["endAge"] = this.endAge;
        let recipeVals = [];
        var that = this;
        this.datas.forEach((_) => {
          let index = 0;
          _.weeks.forEach((__) => {
            __.foods.forEach((___) => {
              if (___.children) {
                day[index] += 1;
                mealTypes.push(that.getmealTypeData(_.name));
                ___.children.forEach((____) => {
                  recipeVals.push({
                    foodId: ____.id,
                    val: ____.count ? ____.count : 0,
                    mealType: that.getmealTypeData(_.name),
                    week: __.name.slice(4),
                  });
                });
              }
            });
            index++;
          });
        });
        if (mealTypes.length > 0) {
          let obj = Array.from(new Set(mealTypes));
          let resultObj = "";
          for (let i = 0; i < obj.length; i++) {
            resultObj += obj[i] + ",";
          }
          foods["mealTypes"] = resultObj.substring(0, resultObj.length - 1);
        }
        for (let i = 0; i < day.length; i++) {
          if (day[i] > 0) {
            days++;
          }
        }
        foods["recipeVals"] = recipeVals;
        foods["days"] = days;
        let types = "";
        for (let i = 0; i < this.foodCatalog.length; i++) {
          types += that.getmealTypeData(this.foodCatalog[i]) + ",";
        }
        foods["types"] = types;
        if (foods.recipeVals.length > 0) {
          calRecipe(foods).then((res) => {
            if (res.data.success) {
              let resData = res.data.data;
              if (resData.nutritionCalDTOList) {
                let intake = {};
                let data = [];
                intake.mealSelect =
                  "推荐范围(" + resData.recipeCalDTOList.gl.mealSelect + "%)";

                that.intakeValue.forEach((_) => {
                  if (_.code == "sl" || _.code == "jg") {
                    data.push({
                      name: _.name,
                      range: "适量",
                      jl: parseFloat(
                        resData.recipeCalDTOList[_.code].jl
                      ).toFixed(2),
                      grade: "OK",
                      point: 0,
                      avg: resData.recipeCalDTOList[_.code].avg,
                    });
                  } else {
                    data.push({
                      name: _.name,
                      range:
                        resData.recipeCalDTOList[_.code].rang_min +
                        "-" +
                        resData.recipeCalDTOList[_.code].rang_max +
                        "(" +
                        resData.recipeCalDTOList[_.code].recomRangMin +
                        "-" +
                        resData.recipeCalDTOList[_.code].recomRangMax +
                        ")",
                      jl: parseFloat(
                        resData.recipeCalDTOList[_.code].jl
                      ).toFixed(2),
                      grade: resData.recipeCalDTOList[_.code].grade,
                      point: resData.recipeCalDTOList[_.code].point,
                      avg: resData.recipeCalDTOList[_.code].avg,
                    });
                  }
                });

                intake.data = data;
                intake.avg = "食谱净量(平均年龄" + data[0].avg + ")";
                let nutrition = [];
                //
                that.nutritionValue.forEach((_) => {
                  nutrition.push({
                    code: _.code,
                    name: _.name,
                    bz: _.bz,
                    min: _.min,
                    max: _.max,
                    realIntake: resData.nutritionCalDTOList[_.code].realIntake,
                    dris: resData.nutritionCalDTOList[_.code].realPropor,
                    dris2: resData.nutritionCalDTOList[_.code].dris,
                    realPropor: resData.nutritionCalDTOList[_.code].realPropor,
                    reqPropor:
                      resData.nutritionCalDTOList[_.code].min +
                      "-" +
                      resData.nutritionCalDTOList[_.code].max,
                    grade: resData.nutritionCalDTOList[_.code].grade,
                    point: resData.nutritionCalDTOList[_.code].point,
                  });
                });
                //

                let power = [];
                that.powerValue.forEach((_) => {
                  power.push({
                    name: _.name,
                    req:
                      resData.powerCalDTOList[_.code].min +
                      "-" +
                      resData.powerCalDTOList[_.code].max,
                    real: resData.powerCalDTOList[_.code].real,
                    grade: resData.powerCalDTOList[_.code].grade,
                    point: resData.powerCalDTOList[_.code].point.toFixed(2),
                  });
                });

                let protein = [];
                protein = resData.proteinCalDTOList;
                let sum = 0;
                resData.proteinCalDTOList.forEach((_) => {
                  sum += parseFloat(_.real);
                });
                protein.forEach((_) => {
                  _["realSum"] = parseFloat(sum).toFixed(2);
                  _["real"] = _.real.toFixed(2);
                  _["req"] = ">=" + _.min;
                  if (parseFloat(_.min) <= parseFloat(sum)) {
                    _["grade"] = "ok";
                    _["point"] = "0";
                  } else {
                    _["grade"] = "不足";
                    _["point"] = ((10 / _.min) * (_.min - sum)).toFixed(2);
                  }
                });
                let meal = [];
                meal = resData.mealTypeCalDTOList;
                meal.forEach((_) => {
                  _["real"] = parseFloat(_["real"]).toFixed(2);
                });

                that.pcScore = that.score;
                var tenantName = resData.tenantName;
                that.$emit(
                  "childfn",
                  Math.floor(that.getData(res.data.data) * 100) / 100,
                  "datas",
                  this.pcScore,
                  intake,
                  nutrition,
                  power,
                  protein,
                  meal,
                  tenantName
                );
              }
            } else {
              that.$message({
                message: "食材营养素数据不全",
                type: "info",
              });
            }
          });
        } else {
          this.pcScore = this.score;
          that.$emit("childfn", 0, "datas", this.pcScore, [], [], [], [], []);
        }
      } else {
        this.$message({
          type: "info",
          message: "请输入年龄!",
        });
      }
    },

    //处理数据
    getData(data) {
      let lastScore = 100;
      if (data.mealTypeCalDTOList && data.mealTypeCalDTOList.length) {
        for (let i = 0; i < data.mealTypeCalDTOList.length; i++) {
          lastScore =
            parseFloat(lastScore) -
            parseFloat(data.mealTypeCalDTOList[i].point);
        }
      }
      if (data.nutritionCalDTOList) {
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.nutritionCalDTOList["101"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.nutritionCalDTOList["102"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.nutritionCalDTOList["201"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.nutritionCalDTOList["204"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.nutritionCalDTOList["301"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.nutritionCalDTOList["303"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.nutritionCalDTOList["401"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.nutritionCalDTOList["405"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.nutritionCalDTOList["406"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.nutritionCalDTOList["415"].point);
      }
      if (data.powerCalDTOList) {
        lastScore =
          parseFloat(lastScore) - parseFloat(data.powerCalDTOList["102"].point);
        lastScore =
          parseFloat(lastScore) - parseFloat(data.powerCalDTOList["103"].point);
        lastScore =
          parseFloat(lastScore) - parseFloat(data.powerCalDTOList["104"].point);
      }
      if (data.recipeCalDTOList) {
        lastScore =
          parseFloat(lastScore) - parseFloat(data.recipeCalDTOList["dd"].point);
        lastScore =
          parseFloat(lastScore) - parseFloat(data.recipeCalDTOList["gl"].point);
        // lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["jg"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.recipeCalDTOList["rzp"].point);
        lastScore =
          parseFloat(lastScore) - parseFloat(data.recipeCalDTOList["sc"].point);
        lastScore =
          parseFloat(lastScore) - parseFloat(data.recipeCalDTOList["sg"].point);
        // lastScore= parseFloat(lastScore)-parseFloat(data.recipeCalDTOList["sl"].point);
        lastScore =
          parseFloat(lastScore) - parseFloat(data.recipeCalDTOList["sy"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.recipeCalDTOList["syy"].point);
        lastScore =
          parseFloat(lastScore) -
          parseFloat(data.recipeCalDTOList["xql:scp:dl"].point);
      }
      var real = 0;
      if (data.proteinCalDTOList && data.proteinCalDTOList.length) {
        for (let i = 0; i < data.proteinCalDTOList.length; i++) {
          real += parseFloat(data.proteinCalDTOList[i].real);
        }
        var point =
          (10 / parseFloat(data.proteinCalDTOList[0].min)) *
          (parseFloat(data.proteinCalDTOList[0].min) - real > 0
            ? parseFloat(data.proteinCalDTOList[0].min - real)
            : parseFloat(real - data.proteinCalDTOList[0].min));
        lastScore = lastScore - (point < 10 ? point : 10);
      }
      return lastScore;
    },
    //新增菜谱
    appendDragFood(res, id, wk) {
      if (!res.id) {
        return;
      }
      this.datas.forEach((data) => {
        if (data.id === id) {
          data.weeks.forEach((week) => {
            if (week.name === wk) {
              var food = week.foods.find((p) => p.id == res.id);
              if (food) {
                return;
              } else {
                if (!week.foods) {
                  week.foods = [];
                }
                week.foods.push(res);
                return;
              }
            }
          });
        }
      });
    },
    init() {
      this.refreshData();
    },

    // 处理数据
    refreshData() {
      // 计算食物数量 主要用于合并单元格
      this.datas.forEach((item) => {
        item.weeks.forEach((week) => {
          var count = 1;
          week.foods.forEach((food) => {
            count = count + 1;
            if (food.children) {
              count = count + food.children.length;
            }
          });
          if (week.foods != undefined) {
            week.foods.forEach((food) => {
              //
              food.spans = count;
              food.children.forEach((c) => {
                c.spans = count;
              });
            });
          }
        });
      });
    },

    // 设置假期
    onCheck(week, res) {
      var idx = this.headers.findIndex((p) => p.name === week);
      if (idx > -1) {
        var item = this.headers.find((p) => p.name === week);
        item.is_vacation = res;
        this.$set(this.headers, idx, item);
      }
    },

    // 合并单元格
    onTableSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        if (row.spans) {
          return [row.spans, 1];
        } else {
          return [1, 1];
        }
      }
    },

    // 选择菜谱
    onChoice(data_id, week_id) {
      this.dialog_choice.data_id = data_id;
      this.dialog_choice.week_id = week_id;
      this.dialog_choice.opened = true;
      // console.log(this.dialog_choice.data_id);
    },

    // 选择菜谱结果
    onChoiceChange(res) {
      // console.log(res);
      this.datas.forEach((data) => {
        if (data.id === this.dialog_choice.data_id) {
          data.weeks.forEach((week) => {
            if (week.id === this.dialog_choice.week_id) {
              var food = week.foods.find((p) => p.id == res.id);
              if (food) {
                this.$message({
                  message: "已经存在，请重新选择",
                  type: "error",
                });

                return;
              } else {
                week.foods.push(res);
                // 关闭对话框
                this.dialog_choice.opened = false;
                this.refreshData();
                return;
              }
            }
          });
        }
      });
    },
    //食材数量改变
    foodChange(data_id, week_id) {
      this.datas.forEach((data) => {
        if (data.id === data_id) {
          data.weeks.forEach((week) => {
            if (week.id === week_id) {
              week.foods.forEach((food) => {
                let count = 0;
                food.children.forEach((___) => {
                  if (isNaN(___.count)) {
                    this.$set(___, "count", 0);
                  }
                  count += parseFloat(___.count ? ___.count : 0);
                });
                this.$set(food, "count", count);
              });
            }
          });
        }
      });
      this.getFoodScore();
    },
    //菜品数量改变
    dishChange(data_id, week_id) {
      this.datas.forEach((data) => {
        if (data.id === data_id) {
          data.weeks.forEach((week) => {
            if (week.id === week_id) {
              week.foods.forEach((food) => {
                let count = 0;
                food.children.forEach((___) => {
                  count += parseFloat(___.count ? ___.count : 0);
                });
                if (isNaN(food.count)) {
                  this.$set(food, "count", 0);
                }
                if (parseFloat(count) != parseFloat(food.count)) {
                  food.children.forEach((___) => {
                    if (isNaN(food.count) || isNaN(___.count)) {
                      this.$set(___, "count", 0);
                    }
                    if (food.count == 0 && ___.count == 0) {
                      this.$set(
                        ___,
                        "count",
                        (1 / food.children.length) * food.count
                      ).toFixed(2);
                    } else {
                      if (___.count != 0) {
                        this.$set(
                          ___,
                          "count",
                          (
                            (parseFloat(food.count) / parseFloat(count)) *
                            ___.count
                          ).toFixed(2)
                        );
                      }
                    }
                  });
                }
              });
            }
          });
        }
      });
      this.getFoodScore();
    },
    // 移除
    onRemove(data_id, week_id, food_id, week_name) {
      //
      var foods;
      this.datas.forEach((data) => {
        if (data.id === data_id) {
          data.weeks.forEach((week) => {
            if (week.id === week_id) {
              var idx = week.foods.findIndex((p) => p.id === food_id);
              foods = week.foods.filter((p) => p.id === food_id)[0];
              if (idx > -1) {
                week.foods.splice(idx, 1);
              }
            }
          });
        }
      });
      // console.log(foods)
      // for(let i=0;i<this.foodMutuals.length;i++){
      //   for(let j=0;j<foods.children.length;j++){
      //     if(this.foodMutuals[i]["data_id"]==data_id&&week_name==this.foodMutuals[i]["week_id"]){
      //       if(this.foodMutuals[i]["foodId"]==foods.children[j].id||this.foodMutuals[i]["foodId1"]==foods.children[j].id){
      //         this.foodMutuals.splice(i,1)
      //       }
      //     }
      //   }
      // }
      this.getFoodScore();
      this.refreshData();
      this.resizeExpendHeight();
      let node = {
        id: "1",
      };
      debugger;
      this.$emit("jundgeFood");
    },

    // 上传图片
    onUploadImage(data_id, week_id, res) {
      //   console.log(res);
      if (res && res.status === "success") {
        this.datas.forEach((data) => {
          if (data.id === data_id) {
            data.weeks.forEach((week) => {
              if (week.id === week_id) {
                week.image =
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604519021887&di=7dc08416a5f9f6301472e0974e043186&imgtype=0&src=http%3A%2F%2Fcp1.douguo.com%2Fupload%2Fcaiku%2F7%2Ff%2F0%2Fyuan_7fb557435ef7dc525adefe1efaad2070.jpg";
              }
            });
          }
        });
      }
    },
    //图片上传成功
    handleAvatarSuccess(data_id, week_id, res, file) {
      if (res && res.success) {
        this.datas.forEach((data) => {
          if (data.id === data_id) {
            data.weeks.forEach((week) => {
              if (week.id === week_id) {
                week.image = res.data.link;
              }
            });
          }
        });
      }
    },
    handleAvatarRemove(data_id, week_id, file) {
      this.datas.forEach((data) => {
        if (data.id === data_id) {
          data.weeks.forEach((week) => {
            if (week.id === week_id) {
              this.$set(week, "image", undefined);
              this.$set(week, "dialogVisible", false);
            }
          });
        }
      });
    },
    handlePictureCardPreview(data_id, week_id, file) {
      this.datas.forEach((data) => {
        if (data.id === data_id) {
          data.weeks.forEach((week) => {
            if (week.id === week_id) {
              this.$set(week, "dialogVisible", true);
            }
          });
        }
      });
    },
    /////////  methods end ///////////
  },
};
</script>
<style>
.foodsweek .table-week .avue-upload-item .el-upload--picture-card,
.foodsweek .el-upload-list--picture-card .el-upload-list__item {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}
.foodsweek .table-week .avue-upload-item {
  width: 100px;
  height: 100px;
}
.foodsweek
  .table-week
  .el-upload-list--picture-card
  .el-upload-list__item-status-label {
  width: 0px !important;
}
</style>
<style scoped>
/* .table-week th {
  background: #f8fbfc !important;
} */
.jundgeFoodRedColor {
  border-bottom: red 1px solid;
  display: inline-block;
  height: 25px;
}
.jundgeFoodOrangeColor {
  border-bottom: orange 1px solid;
  display: inline-block;
  height: 20px;
}
.table-week td {
  padding: 0 !important;
  vertical-align: top !important;
}

.table-week td .cell {
  padding: 0 !important;
}
.table-week .col-date3 {
  vertical-align: middle !important;
  background: #f8fbfc !important;
}

.table-foods th {
  background: #fff !important;
}
.table-foods td {
  padding: 12px 0 !important;
  vertical-align: middle !important;
  background: #fff !important;
}
.table-foods td .cell {
  padding: 0 10px !important;
}
.drapInActive .el-table th {
  background-color: #dcdfe6 !important;
}

.ico1 {
  background: url("/img/cater/food11.png") no-repeat center !important;
  display: block;
  height: 24px;
}
.ico2 {
  background: url("/img/cater/food11.png") no-repeat center !important;
  display: block;
  height: 24px;
}
.ico3 {
  background: url("/img/cater/food11.png") no-repeat center !important;
  display: block;
  height: 24px;
}
.week1-ico {
  background: url("/img/cater/food11.png") no-repeat !important;
  display: inline-block;
}
.colNoneBorder {
  /* border-bottom: 1px solid transparent !important; */
}
.weekHeader {
  display: inline-block;
  width: 32%;
}
</style>
